<template>
    <div class="">

        <Tabs value="name0" @on-click="tabClick">
            <template v-for="(item, index) in allOneData">
                <Tab-pane :label="item.GCCName" :name="'name'+ index">
                    <Table :columns="columns" :data="item.tableData" @on-sort-change="onSortChange($event, item)"></Table>
                    <div v-if="item.pageInfo &&　item.pageInfo.pageCount" class="page_center">
                        <Page :current="item.pageInfo.pageIndex" :total="item.pageInfo.pageCount" :page-size="item.pageInfo.pageSize" show-elevator @on-change="onPageChange($event, item)"></Page>
                    </div>
                </Tab-pane>
            </template>
        </Tabs>

    </div>
</template>

<script type="text/ecmascript-6">

    import Vue from 'vue'
    // 发送ajax 请求的组件
    import getData from '../../api/getData'

    var goodContentLogic = {

        // 根据类目查询爆文素材内容
        ghGetAllOneData: function (vueObj) {
            getData.post("ghGetAllOneData").then(function (response) {
                var tempData = response.data.data;
                vueObj.allOneData = tempData;
                goodContentLogic.ghGetGoodsContentAll( tempData[0], vueObj );
//                console.log("JSON.stringify(tempData) : " + JSON.stringify(tempData));
            }).catch(function (response) {
                vueObj.$Message.info('网络错误，请联系客服');
            });

        },

        // 根据类目查询爆文素材内容
        ghGetGoodsContentAll: function ( item, vueObj ) {
        	var paramObj = {
                GCCID: item.GCCID,
                pageSize: item.pageInfo ? item.pageInfo.pageSize : 10,
                pageIndex: item.pageInfo ? item.pageInfo.pageIndex : 1,
                orderType: item.pageInfo ? item.pageInfo.orderType : 1,
                orderName: item.pageInfo ? item.pageInfo.orderName : 1
            };
            getData.post("ghGetGoodsContentAll", paramObj).then(function (response) {
                if( response.data.code == 0 ){
                    var tempData = response.data.data;
                    var tableData = goodContentLogic.getTableData(tempData);
                    Vue.set(item, 'pageInfo', {
                        pageCount: response.data.PageCount,
                        pageSize: response.data.pageSize,
                        pageIndex: response.data.pageIndex,
                        orderType: paramObj.orderType,
                        orderName: paramObj.orderName
                    });
                    Vue.set(item, 'tableData', tableData);
                }else{
                    vueObj.$Message.info( response.data.msg ? response.data.msg : '网络错误，请稍后重试' );
                }

            }).catch(function (response) {
                vueObj.$Message.info('网络错误，请联系客服');
            });

        },

        getTableData: function( data ){
            var tableData = [];
            data.forEach(function(value, index){
                var colObj = {
                	id: value.GMCTID,
                    img: value.GMCTImage,
                	title: value.GMCTTitle,
                	url: value.GMCTURL,
                    type: value.TypeName,
                	source: value.GMCTSource,
                    time: value.RDate,
                    comment: value.GMCTCommentNum,
                    favorite: value.ISSC
                };
                tableData.push( colObj );
            });
            return tableData;
        },

        ghGoodsCollect: function( url, param, vueObj ){
            getData.post( url, {ID: param.id} ).then(function (response) {
            	var data = response.data;
                if(data.code == 0){
                	param.favorite = param.favorite ? 0 : 1;
                }else{
                	vueObj.$Message.info( data.msg ? data.msg : '网络错误，请稍后重试');
                }
            }).catch(function (response) {
                console.log(response);
            });
        }

    };

    export default {
        data: function () {
            return {
            	allOneData: [],
                columns: [
                    {
                        title: '缩略图',
                        key: 'img',
                        width: 150,
                        ellipsis: true,
                        render: (h, params) => {
                            return h('div', [
                                h('Img', {
                                    attrs: {
                                        src: params.row.img
                                    },
                                    style: {
                                        width: '90px',
                                        height: '35px'
                                    },
                                })
                            ]);
                        }
                    },
                    {
                        title: '标题',
                        key: 'title',
                        ellipsis: true,
                        render: (h, params) => {
                            return h('a', {
                                attrs: {
                                    href: params.row.url,
                                    title: params.row.title,
                                    target: '_blank'
                                },
                            }, params.row.title);
                        }
                    },
                    {
                        title: '类型',
                        key: 'type',
                        width: 100,
                        ellipsis: true
                    },
                    {
                        title: '来源',
                        key: 'source',
                        width: 80,
                        ellipsis: true
                    },
                    {
                        title: '时间',
                        key: 'time',
                        sortable: 'custom',
                        width: 150,
                        ellipsis: true
                    },
                    {
                        title: '评论',
                        key: 'comment',
                        sortable: 'custom',
                        width: 90,
                        ellipsis: true
                    },
                    {
                        title: '收藏',
                        key: 'favorite',
                        ellipsis: true,
                        width: 80,
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    on: {
                                        click: () => {
                                            this.markFavorite( params.row );
                                        }
                                    }
                                }, [
                                    h('Icon', {
                                        props: {
                                            type: params.row.favorite ? 'star' : 'ios-star-outline'
                                        },
                                        style: {
                                            fontSize: '20px'
                                        }
                                    })
                                ])
                            ]);
                        }
                    }
                ]
            }
        },
        created(){

            goodContentLogic.ghGetAllOneData(this);

        },
        methods: {

            tabClick(name){
                var index = parseInt( name.split('name')[1] );
                if( !this.allOneData[index].tableData ){
                    goodContentLogic.ghGetGoodsContentAll(this.allOneData[index], this);
                }
            },

            markFavorite( param ){
                var url = param.favorite == 1 ? 'ghGoodsCollectCancel' : 'ghGoodsCollect';
                goodContentLogic.ghGoodsCollect( url, param, this);
            },

            onPageChange(page, item){
                item.pageInfo.pageIndex = page;
                goodContentLogic.ghGetGoodsContentAll(item);
            },

            /**
             *  排序字段和顺序变化回调
             * @param sortObj  orderType:1降序 2升序    orderName:1 发布时间 2评论数
             * @param item
             */
            onSortChange( sortObj, item ){
                if(sortObj.order !== 'normal'){
                    item.pageInfo.pageIndex = 1;
                    item.pageInfo.orderType = sortObj.order == 'asc' ? 2 : 1;
                    item.pageInfo.orderName = sortObj.key == 'time' ? 1 : 2;
                    goodContentLogic.ghGetGoodsContentAll(item);
                }
            }

        }
    }
</script>
